<template>
	<view class="invovice-record-detail-layout">
		<view class="invovice-record-detail-item">
			<text>开票金额</text>
			<text>{{jsonData.amount}}元</text>
			<view class="line"></view>
		</view>
		<view class="invovice-record-detail-item">
			<text>发票号码</text>
			<text>{{jsonData.invoiceCode}}</text>
			<view class="line"></view>
		</view>
		<view class="invovice-record-detail-item">
			<text>开票日期</text>
			<text>{{jsonData.dateTime}}</text>
			<view class="line"></view>
		</view>
		<view class="invovice-record-detail-item">
			<text>审核状态</text>
			<text>{{statusText}}</text>
			<view class="line"></view>
		</view>
		<view class="invovice-record-detail-item" v-if="jsonData.remark">
			<text>审核备注</text>
			<text>{{jsonData.remark}}</text>
		</view>
		<view class="invovice-record-detail-image-box" v-if="jsonData.picUrl">
			<image class="invovice-record-detail-image" :src="jsonData.picUrl" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data || '{}'))
	console.log(jsonData)
	const statusText = computed(()=>{
		if(jsonData.state == '1') {
			return '审核通过'
		}
		else if(jsonData.state == '2') {
			return '审核失败'
		}
		else if(jsonData.state == '0') {
			return '审核中'
		}
		return ''
	})
</script>

<style lang="scss" scoped>
.invovice-record-detail-layout{
	padding: 20rpx 0;
	.invovice-record-detail-item{
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		font-size: 26rpx;
		position: relative;
		text:nth-child(1){
			flex-shrink: 0;
		}
		text:nth-child(2){
			margin-left: 40rpx;
		}
	}
	.invovice-record-detail-container{
		margin-top: 20rpx;
	}
	.invovice-record-detail-image-box{
		padding: 30rpx;
		image{
			width: 100%;
		}
	}
}
</style>
